<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>命名视图</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <!-- 同时「同级」展示多个视图 -->
    <!-- 默认为default -->
    <router-view></router-view>
    <!-- 显示命名为a的路由视图 -->
    <router-view name="a"></router-view>
    <!-- 显示命名为b的路由视图 -->
    <router-view name="b"></router-view>


  </div>

  <script>
    // 1. 定义路由组件
    const Foo = {
      template: `
        <div>
          <h2>Foo</h2>
        </div>
      `
    }
    const A = { template: `<div> A </div>` };
    const B = { template: `<div> B </div>` };

    // 2. 定义路由
    const routes = [
      {
        path: `/`,
        // TODO: 因为一个视图使用一个组件渲染的道理, 所以对于同个路由, 多个视图就需要多个组件, 确保正确使用
        // `components` 配置 「记得带上s」
        components: {
          // 默认渲染与 => component: Foo 无异
          default: Foo,
          // key: value, key为视图名称, value为渲染组件对象
          a: A,
          b: B
        }
      }
    ]

    // 3. 创建router实例
    const router = new VueRouter({
      routes
    })

    // 4. 创建vue实例
    const app = new Vue({
      router
    }).$mount('#app');
  </script>
</body>

</html>